<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="首页"
        left-text="logo"
        right-text="消息"
      />
    </header>
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
          <van-image :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <van-card
        v-for="item of prolist"
        :key="item.proid"
        :price="item.price"
        :desc="item.desc"
        :title="item.proname"
        :thumb="item.proimg"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.type }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Card, Tag } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Card)
Vue.use(Tag)
export default {
  data () {
    return {
      bannerlist: [], // 轮播图的数据
      prolist: [] // 产品列表数据
    }
  },
  // vue生命周期钩子函数  ----  数据请求
  mounted () {
    // get方式  请求数据
    axios.get('http://nz1908.wudaxun.top/api/banner').then(res => {
      console.log(res)
      // 改变初始化的轮播图数据
      this.bannerlist = res.data.data
    })
    axios.get('http://nz1908.wudaxun.top/api/pro').then(res => {
      console.log(res)
      // 改变初始化的轮播图数据
      this.prolist = res.data.data
    })
  }
}
</script>
